<template>
  <!-- <a-card style="margin: 0 auto"> -->
  <a-layout>
    <a-layout-sider width="200" style="background: #fff">
      <a-menu
        :selectedKeys="[$route.path]"
        mode="inline"
        :style="{ height: '100%', borderRight: 0, paddingLeft: '24px' }"
        @click="handleMenuChange"
      >
        <a-menu-item key="/user/info">
          <template #icon>
            <UserOutlined />
          </template>
          用户信息
        </a-menu-item>
        <a-menu-item key="/user/password">
          <template #icon>
            <CalendarOutlined />
          </template>
          修改密码
        </a-menu-item>
        <a-menu-item key="/user/tag">
          <template #icon>
            <TagOutlined />
          </template>
          标签管理
        </a-menu-item>
        <a-menu-item key="/user/record">
          <template #icon>
            <CalendarOutlined />
          </template>
          操作记录
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-content
        :style="{
          background: '#fff',
          padding: '0 24px 0 24px',
          margin: 0,
          minHeight: '280px'
        }"
      >
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
  <!-- </a-card> -->
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import {
  UserOutlined,
  CalendarOutlined,
  TagOutlined
} from '@ant-design/icons-vue';
import type { MenuTheme, MenuProps } from 'ant-design-vue';

export default defineComponent({
  components: {
    UserOutlined,
    CalendarOutlined,
    TagOutlined
  },
  setup() {
    const state = reactive({
      theme: 'dark' as MenuTheme,
      selectedKeys: ['1'],
      openKeys: ['sub1']
    });
    const changeTheme = (checked: boolean) => {
      state.theme = checked ? 'dark' : 'light';
    };

    const router = useRouter();

    const handleMenuChange: MenuProps['onClick'] = (e: any) => {
      const key = e.key;
      router.push(key);
    };

    onMounted(() => {
      document.onscroll = (e) => {};
    });

    return {
      ...toRefs(state),
      changeTheme,
      handleMenuChange
    };
  }
});
</script>
